<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<!-- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> -->
		<!-- name="divport" 是pc端的 -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="./css/local.css" />

	</head>
	<body>
		<div id="app1">
			<div class="content" >
				<div class="trading-today">
					<div class="collapse-area">
						<div class="collapse-main" @click="showList = !showList">
							<div class="box" v-show="showCurrencyIndex==index || showList" v-for="(item,index) in currencyList" :key="index" @click="showCurrencyIndex=index">{{item}}</div>
						</div>
					</div>
					<div class="tradingInfo-area">
						<div class="tradingInfo-l">
							<div class="title">{{'0.00002125'}}</div>
							<div class="amount">
								<span>{{'≈ 0.02USDT'}}</span>
								<span class="ratio">{{'+19.51%'}}</span>
							</div>
						</div>
						<div class="tradingInfo-r">
							<div>最高{{ $t("message.hello") }}<span>{{'0.00002164'}}</span></div>
							<div>最低<span>{{'0.00001711'}}</span></div>
							<div>24H<span>{{'63254535'}}</span></div>
						</div>
					</div>
				</div>
				<div class="chart-tab">
					<div class="tab-area">
						<div class="tab-wrapper">
							<div class="tab-item" :class="{'active': currentChartIndex == 0}" @click="switchTab(0)">分时图
							</div>
							<div class="tab-item" :class="{'active': currentChartIndex == 1}" @click="switchTab(1)">日线图
							</div>
							<div class="tab-item" :class="{'active': currentChartIndex == 2}" @click="switchTab(2)">周线图
							</div>
							<div class="tab-item" :class="{'active': currentChartIndex == 3}" @click="switchTab(3)">月线图
							</div>
							<div class="tab-item" :class="{'active': currentChartIndex == 4}" @click="switchTab(4)">近一年
							</div>
						</div>
					</div>
					<div class="chart-area">
						<div id="main" class="charts"><!-- 这里就是图表 --></div>
						<div class="charts-label">
							<div class="charts-MA5">MA5:{{MA5 || 0}}</div>
							<div class="charts-MA10">&nbsp;MA10:{{MA10 || 0}}</div>
							<div class="charts-MA30">&nbsp;MA30:{{MA30 || 0}}</div>
						</div>
						<!-- <div class="charts-bar-label">
							<div class="charts-MA5">MA5:{{volMA5 || 0}}</div>
							<div class="charts-MA10">&nbsp;MA10:{{volMA10 || 0}}</div>
						</div> -->
					</div>
				</div>
				<!-- account-owner-benefits 这部分可能废弃了 -->
				<div class="account-owner-benefits">
					<div class="account-owner">
						<div class="">户主：</div>
						<div class="money-amount left">
							<div class="title">积存金（美元）</div>
							<div class="amount">{{balance}}$</div>
						</div>
					</div>
					<div class="lower-level-benefits">
						<div class="" @click="openBenefits()">发放下级福利<image src="../../static/images/index-add.png" mode=""></image>
						</div>
						<div class="money-amount right">
							<div class="title">抛出总金额（元）</div>
							<div class="amount">{{throwOutTotalAmount}}￥</div>
						</div>
					</div>
				</div>
				<!-- 委托订单  最新成交 -->
				<div class="category-head">
					<div class="category-head-list">
						<div class="category-head-item" :class="{'active': category==1}" @click="switchCategory(1)">委托订单</div>
						<div class="category-head-item" :class="{'active': category==2}" @click="switchCategory(2)">最新成交</div>
					</div>
					<div class="category-head-under">
						<div class="category-underL"><span :class="{'active': category==1}"></span></div>
						<div class="category-underL"><span :class="{'active': category==2}"></span></div>
					</div>
				</div>
				<div class="category-main">
					<div class="depth" v-if="category==1">
						<div class="depth-head">
							<div class="depth-head-left">
								<div class="depth-head-label depth-head-left-index">买盘</div>
								<div class="depth-head-label">数量(张)</div>
							</div>
							<div class="depth-head-center">
								<div class="depth-head-label">价格(USDT)</div>
							</div>
							<div class="depth-head-right">
								<div class="depth-head-label">数量(张)</div>
								<div class="depth-head-label depth-head-right-index">卖盘</div>
							</div>
						</div>
						<div class="depth-main">
							<div class="depth-main-item">
								<div class="dmi-cell" style="justify-content: flex-end;" v-for="(item,index) in buyList" :key="index">
									<div class="dmi-cell-bg" :style="{'width': `${item.width}%`,'backgroundColor':'#1C4C4E'}"></div>
									<div class="dmi-cell-item">
										<div class="dmi-cell-index">{{index+1}}</div>
										<div class="dmi-cell-num">{{item.amount || '--'}}</div>
										<div class="dmi-cell-price" style="padding-right: 5px;">{{item.price || '--'}}</div>
									</div>
								</div>
							</div>
							<div class="depth-main-item">
								<div class="dmi-cell" v-for="(item,index) in sellList || 10" :key="index">
									<div class="dmi-cell-bg" :style="{'width': `${item.width}%`,'backgroundColor':'#422B32'}"></div>
									<div class="dmi-cell-item">
										<div class="dmi-cell-price-sell" style="padding-left: 5px;">{{item.price || '--'}}</div>
										<div class="dmi-cell-num" style="text-align: right;">{{item.amount || '--'}}</div>
										<div class="dmi-cell-index" style="text-align: right;">{{index+1}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="depth" v-else>
						<div class="depth-head">
							<div class="depth-head-left">
								<div class="depth-head-label">时间</div>
							</div>
							<div class="depth-head-center">
								<div class="depth-head-label">价格(USDT)</div>
							</div>
							<div class="depth-head-right">
								<div class="depth-head-label">数量(张)</div>
							</div>
						</div>
						<div class="depth-main">
							<div>
								<div class="depth-main-listItem" v-for="(item,index) in dealHis" :key="index">
									<div class="dmli-left">{{item.date}}</div>
									<div class="dmli-center" :class="(item.takerFlag == 1) ? 'redF' : 'greenF' ">{{item.price}}</div>
									<div class="dmli-right">{{item.amount}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="btn-wrapper">
					<div class="btn-group">
						<button class="greenB" @click="openBuy('up')">买涨</button>
						<button class="redB" @click="openBuy('down')">买跌</button>
					</div>
				</div>
			</div>
			<!-- 弹出层 -->
			<div class="mask" v-show="showMask">
				<div class="exchangeRate-area">
					<div class="">购买汇率</div>
					<image src="../../static/images/index-sign-out.png" @click="showMask = false"></image>
				</div>
				<div class="orderAmount-area">
					<div class="amount-item" 
					:class="{'active': currentAmountIndex == index}" 
					v-for="(item, index) in amountLists" :key="index" 
					@click="currentAmountIndex = index, buyAmount = item, diyAmount = '', isDiy = false">{{item}}</div>
				</div>
				<div v-show="isDiy" class="title">自定义下单金额</div>
				<button v-show="!isDiy" class="diy-btn"
					@click="isDiy=true"
					:class="{'redB': buyStatus == 0, 'greenB':buyStatus == 1}">自定义下单金额</button>
				<div class="info-display-area">
					<div class="info-top-diy" v-show="isDiy">
						<div class="">自定义：</div>
						<input maxlength="14" type="number" @input="inputNum($event)" v-model="diyAmount" />
						<a>$</a>
					</div>
					<div class="info-left">
						<div class="">购买：{{buyAmount}}</div>
						<div class="">合约：美元汇率</div>
						<div class="">订单方向：<a
								:class="{'redF': buyStatus == 0, 'greenF':buyStatus == 1}">{{buyStatus == 1?'买跌':'买涨'}}</a>
						</div>
					</div>
					<div class="info-right">
						<div class="">预期收入：{{expectedRevenue}}$</div>
						<div class="">结算周期：{{period}}秒</div>
						<div class="">当前价格：{{currentPrice}}</div>
					</div>
					<button class="confrim-btn" :class="{'redB': buyStatus == 0, 'greenB':buyStatus == 1}">确认下单</button>
				</div>
			</div>
			<!-- 底部导航 -->
			<!-- <div class="container">
				<div class="app-tabbar">
					<div class="tabbar-item" @click="goIndex('home', 1)">
						<div class="icon icon-home" :class="{'active': isIndex == 1}"></div>
						<a class="" :style="{color: isIndex==1?'#0DD4BB':'#3C547F'}">交易</a>
					</div>
					<div class="tabbar-item" @click="goIndex('invitate', 2)">
						<div class="icon icon-invitate" :class="{'active': isIndex == 2}"></div>
						<a class="" :style="{color:isIndex==2?'#0DD4BB':'#3C547F'}">邀请</a>
					</div>
					<div class="tabbar-item" @click="goIndex('team', 3)">
						<div class="icon icon-team" :class="{'active': isIndex == 3}"></div>
						<a class="" :style="{color:isIndex==3?'#0DD4BB':'#3C547F'}">战队</a>
					</div>
					<div class="tabbar-item" @click="goIndex('user', 4)">
						<div class="icon icon-user" :class="{'active': isIndex == 4}"></div>
						<a class="" :style="{color:isIndex==4?'#0DD4BB':'#3C547F'}">我的</a>
					</div>
				</div>
			</div> -->
		</div>
		

		<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
		
		<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<!-- <script type="text/javascript" src="js/qs.js"></script> -->
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		
		<!-- <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> -->
		<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>


		
		<script src="js/tool.js" type="text/javascript" charset="utf-8"></script>

		<script src="./js/kline.js"></script>
		<!-- <script src="./js/kline.js" type="module"></script> -->
	</body>

</html>
